<template>
    <ContentBox title="党员干部">
        <div class="dangyuanganbu">
            <div class="top">
                <div>
                    <div>
                        <img src="../../assets/image/ganburenshu.png" alt="">
                    </div>
                    <div>
                        <div style="color: #EA4747;" class="digiter-number">203</div>
                        <div>干部人数</div>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../../assets/image/ganbubilv.png" alt="">
                    </div>
                    <div>
                        <div style="color: #00C4C5;" class="digiter-number">23%</div>
                        <div>干部比率</div>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../../assets/image/dangdaibiao.png" alt="">
                    </div>
                    <div>
                        <div style="color: #FEA45B; " class="digiter-number">213</div>
                        <div>党代表</div>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../../assets/image/rendadaibiao.png" alt="">
                    </div>
                    <div>
                        <div style="color: #7379E8;" class="digiter-number">2313</div>
                        <div>人大代表</div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <dangyuanganbu></dangyuanganbu>
                </div>
                <div>
                    <dangyuanganbu></dangyuanganbu>
                </div>
                <div>
                    <dangyuanganbuLine></dangyuanganbuLine>
                </div>
                <div>
                    <dangyuanganbu></dangyuanganbu>
                </div>
            </div>
        </div>
    </ContentBox>
</template>

<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import dangyuanganbu from "./ChartsComponents/dangyuanganbu"
    import dangyuanganbuLine from "./ChartsComponents/dangyuanganbuLine"

    export default {
        components: {
            ContentBox,
            dangyuanganbu,
            dangyuanganbuLine
        }
    }
</script>

<style lang="scss" scoped>
    .dangyuanganbu {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding:0 20px;

        .top {
            height: 20%;
            display: flex;
            > div {
                flex: 1;
                background: #0D114E;
                margin: 0 10px;
                border-radius: 20px;

                display: flex;
                > div {
                    &:first-child {
                        width: 32%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    &:last-child {
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        justify-content: center;
                        align-items: center;
                        > div {
                            text-align: left;
                            &:first-child {
                                font-size: 60px;
                            }
                            &:last-child {
                                font-size: 40px;
                            }
                        }
                    }
                }

            }
        }
        .bottom {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            > div {
                width: 50%;
                height: 50%;
            }

        }
    }
</style>
